<template>
    <article class="main">
      <earning-header></earning-header>
      <!--主体-->
      <main>
        <mt-navbar v-model="active">
          <mt-tab-item id="tab-1">个人业绩</mt-tab-item>
          <mt-tab-item id="tab-2" v-if="userLevel === 'b'">团队业绩({{teamOrderSum > 99 ? '99+' : teamOrderSum}})</mt-tab-item>
          <mt-tab-item id="tab-3">培训奖励（{{trainingOrderSum > 99 ? '99+' : trainingOrderSum}}）</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="active">
          <mt-tab-container-item id="tab-1">
            <personal-list></personal-list>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-2" v-if="userLevel === 'b'">
            <team-list></team-list>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-3">
            <training-list></training-list>
          </mt-tab-container-item>
        </mt-tab-container>
      </main>
    </article>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import EarningHeader from '@/components/EarningHeader'
import PersonalList from '@/components/PersonalList'
import TeamList from '@/components/TeamList'
import TrainingList from '@/components/TrainingList'
export default {
  name: 'home',
  metaInfo: {
    title: '我的收益'
  },
  data () {
    return {
      active: 'tab-1'
    }
  },
  components: {
    EarningHeader,
    PersonalList,
    TeamList,
    TrainingList
  },
  computed: {
    ...mapState({
      token: state => state.main.token, // 用户token
      userLevel: state => state.main.userLevel, // 用户等级 c级用户只能看个人和培训 b级用户可以看三个报表
      teamOrderSum: state => state.team.orderSum, // 团队订单总量
      trainingOrderSum: state => state.training.orderSum // 培训订单总量
    })
  },
  created () {
    // 获取用户的级别
    this.queryUserLevel()
  },
  methods: {
    ...mapActions({
      queryUserLevel: 'main/QueryUserLevel'
    })
  }
}
</script>

<style scoped lang="stylus">
  .main
    &:before
      height 8px
      content ' '
      background #efeef4
      display block
      box-shadow inset 0 1px 0.99px 0.01px rgba(221, 221, 221, 0.004)
</style>
<style>
  .mint-navbar {
    border-bottom: 1px solid #ddd;
  }
  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: none;
    margin-bottom: 0;
    background: #f3f2f9;
  }
  /*需要重置一些mint-ui的样式*/
  .mint-navbar .mint-tab-item {
    padding: 21px 0;
  }
  .mint-tab-item-label {
    font-size: 28px;
    color: #999999;
  }
</style>
